<template>
  <section class="todoapp">
    <!-- 2.3在父组件内绑定自定义事件 -->
    <TodoHeader @add="addFn" :arr="list"></TodoHeader>
    <!-- 1.0 父传子 ，自定义属性，把整个list传给TodoMain-->
    <!-- 3.2 子传父 ，绑定自定义事件 -->
    <TodoMain :arr="showArr" @dele="deleteFn"></TodoMain>
    <!-- 4.0父传子 ，把自定义数据传到子里面去 -->
    <!-- 4.5 TodoMain里面传的是新数组-->
    <TodoFooter
      :arr="isSel"
      @change="changeFn"
      :leng="showArr.length"
      @clear="clearFn"
    ></TodoFooter>
  </section>
</template>

<script>
import "./styles/base.css";
import "./styles/index.css";

import TodoHeader from "./components/TodoHeader";
import TodoMain from "./components/TodoMain";
import TodoFooter from "./components/TodoFooter";

export default {
  components: {
    TodoHeader,
    TodoMain,
    TodoFooter,
  },
  data() {
    return {
      // 7.1从本地取数据出来
      list: JSON.parse(localStorage.getItem("todolist")) || [],
      // 4.1自定义页面全部的数据
      isSel: "all",
    };
  },
  // 4.2计算
  computed: {
    // 4.3需要定义一个新数组
    showArr() {
      // 4.4判断this.isSel是什么状态，需要list数组配合完成
      if (this.isSel === "yes") {
        return this.list.filter((item) => item.isDone);
      } else if (this.isSel === "no") {
        return this.list.filter((item) => item.isDone === false);
      } else {
        return this.list;
      }
    },
  },
  methods: {
    addFn(taskName) {
      // 2.3把输入的数据push到list数组
      this.list.push({
        // 2.4当页面没有数据的时候，就需要判断，没有id则为100，有就id+1
        id: this.list.length ? this.list.at(-1).id + 1 : 100,
        name: taskName,
        //2.5添加的数据是未完成的，所以是false状态
        isDone: false,
      });
    },
    // 3.3删除的是每一项的索引，利用数组filter的方法，当数组的索引!==点击的索引，就过滤到新的数组去
    deleteFn(inde) {
      return (this.list = this.list.filter((item, index) => index !== inde));
    },
    changeFn(type) {
      this.isSel = type;
    },
    clearFn() {
      // 6.0 子传父，筛选掉item.isDone !== true的状态
      return (this.list = this.list.filter((item) => item.isDone !== true));
    },
  },
  // 7.0watch监听，存储到本地
  watch: {
    list: {
      deep: true,
      handler() {
        localStorage.setItem("todolist", JSON.stringify(this.list));
      },
    },
  },
};
</script>